<template>
  <h2>{{ persionList[0].name }}--{{ persionList[0].age }}</h2>
  <button @click="increaseAge">第一个人的年龄+1</button>
  <!-- 将数据传递到 Person 组件-->
  <Person :persions="persionList" :x="xTag" />
</template>

<script lang="ts" setup>
import Person from './components/Person.vue'
import { type IPersonList } from '@/types'
import { ref, reactive } from 'vue'

// 更改 persionList 中的属性值，会同步影响 传递到其他组件的数据
let persionList = reactive<IPersonList>([
  { id: '123', name: '张三', age: 49 },
  { id: '223', name: '李四', age: 74, x: 2 },
])

function increaseAge() {
  persionList[0].age += 1
}

let xTag = ref(9)
</script>

<!-- scoped表示该处定义的style只在当前组件内生效 -->
<style scoped>
button {
  margin: 5px 5px;
}
</style>
